<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>河长制—后台注册</title>
  <link rel="stylesheet" type="text/css" href="{{asset(getThemeAssets('css/login.css'))}}" />
  <style>
  body{height:100%;background:#16a085;overflow:hidden;}
  canvas{z-index:-1;position:absolute;}
  </style>
</head>
<body>
<form role="form" method="POST" action="{{url('/register')}}">
  {{ csrf_field() }}
  <dl class="admin_login">
    <dt>
    <strong>河长制水道检测与管理系统</strong>
    <em>Management System</em>
    </dt>
    <dd class="user_icon">
    <input id="username" type="text" placeholder="6—16位小写字母、下划线、数字" name="name" class="login_txtbx"  />
    <dt class="error" style="display: inline;">
      <em id="error1"></em>
    </dt>
    </dd>

    <dd class="pwd_icon">
    <input id="password" type="password" placeholder="6—10位数字" name="password" class="login_txtbx" />
    <dt class="error" style="display: inline;">
      <em id="error2"></em>
    </dt>
    </dd>

    <dd class="pwd_icon">
    <input id="repassword" type="password" placeholder="确认密码" name="repassword" class="login_txtbx" />
    <dt class="error" style="display: inline;">
      <em id="error3"></em>
    </dt>
    </dd>

    <dd class="ema_icon">
    <input id="email" type="text" placeholder="邮箱" name="email" class="login_txtbx" />
    <dt class="error" style="display: inline;">
      <em id="error4"></em>
    </dt>
    </dd>
    <dd>

    <input type="submit" value="确认注册" class="submit_btn"/>
    </dd>
    <dd>

    <button type="button" class="submit_btn"><a href="{{ route('login')}}" class="submit_btn">返回登录</a></button> 
    </dd>
    <dd>
    <p>后台检测管理系统</p>
    <p>yinni</p>
    </dd>
  </dl>
</form>
  <script src="{{asset(getThemeAssets('jquery/jquery-2.1.1.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('Particleground.js', true))}}"></script>
  <script>
  $(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
  dotColor: '#5cbdaa',
  lineColor: '#5cbdaa'
  });
  });

  // js正则验证表单，对失焦进行处理
  $('#username').blur(function(event) { 
        var username = $('#username').val();
        // console.log(username);    
        // js正则匹配6-10位字符
        // _w等价于[A-Za-z1-9_]
        var username_vali=/^[a-z0-9_]{6,16}$/;
        if (username.length == 0) {
          $('#error1').html('用户名不能为空！');
        } 
        else if (!username_vali.test(username)) {
          $('#error1').html('请输入6—10位小写字母、下划线、数字！');
        } else {
          $('#error1').html('');
        }


  });
  $('#password').blur(function(event) {
      var password = $('#password').val();
      // console.log(password);  
      // js正则匹配6-10位0-9数字
      var password_vali=/^[0-9]{6,10}$/;   
      if (password.length ==0 ) {
          $('#error2').html('密码不能为空');
      }else if(!password_vali.test(password)) {
          $('#error2').html('密码格式为6-10位0-9数字！')
      }else {
          $('#error2').html('');
      } 
  });

  $('#repassword').blur(function(event) {
      var password = $('#password').val();
      var repassword = $('#repassword').val();
      if (repassword.length == 0) {
          $('#error3').html('请重复输入密码！');
      }else if(password != repassword) {
          $('#error3').html('两次输入的密码不一致，请重新输入！');
      }else {
          $('#error3').html('');
      }
  });

  $('#email').blur(function(event) {
      var email = $('#email').val();
      var email_vali = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (repassword.length == 0) {
          $('#error4').html('请重复输入密码！');
      }else if(!email_vali.test(email)) {
          $('#error4').html('邮箱格式不正确！');
      }else {
          $('#error4').html('');
      }
  });
  </script>
</body>
</html>